<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #000;
    }
    #player{
        width: 224px;
        height: 174px;
        background-image: url("../test7_img/player_right.gif");
    }
</style>
<body>
    <div id="player"></div>
</body>
<script src="../js/jquery.js"></script>
<script>
    var X = 0;//记录上一次鼠标点击的X轴
    var Y = 0;//记录上一次鼠标点击的Y轴
    var Fx = 0//方向默认向右
     $(document).click(function(e){//鼠标点击屏幕出发当前函数
        //189000401 邓玉石
        console.log(X);
        if($("#player").is(':animated')){
            if(X < e.pageX)
                $("#player").css({"background-image":"url(../test7_img/player_right.gif"}).stop().animate(
                    {
                        marginLeft:e.pageX-125+'px',
                        marginTop:e.pageY-100+'px'
                    },
                    2000
                ),Fx = 1;
            else
            $("#player").css({"background-image":"url(../test7_img/player_left.gif"}).stop().animate(
                    {
                        marginLeft:e.pageX-125+'px',
                        marginTop:e.pageY-100+'px'
                    }, 
                    2000
                ),Fx = 0;
                X = e.pageX;
                Y = e.pageY;
        }else{
        
            if(X < e.pageX)

                    $("#player").css({"background-image":"url(../test7_img/player_right.gif"}).animate(
                    {
                        marginLeft:e.pageX-125+'px',
                        marginTop:e.pageY-100+'px'
                    },
                    2000
                ),Fx = 1;
            else
            $("#player").css({"background-image":"url(../test7_img/player_left.gif"}).animate(
                {
                    marginLeft:e.pageX-125+'px',
                    marginTop:e.pageY-100+'px'
                },
                2000
            ),Fx = 0;
            X = e.pageX;
            Y = e.pageY;
        }
    })
    //双击大招
    $("#player").dblclick(function(e){
        if(Fx == 1)
            $("#player").css({"background-image":"url(../test7_img/playerbig_right.gif)"})
        else
          $("#player").css({"background-image":"url(../test7_img/playerbig_left.gif)"})
    })
</script>
</html>